<template>
    <div v-if="showDialog" class="festival-container">
        <div class="festival-box">
            <div class="festival-bg"></div>
            <div class="close pointer" @click="handleClose">
                <img src="../../assets/closetwo.png" alt="" class="icon-close">
            </div>
            <div class="festivel-content">
                <div class="p1">尊敬的客户，您好!受中国人民银行(简称“央行”)支付系统影响，</div>
                <div class="p1"><b>“公对公充值”</b>将在 2024 年五一假期关闭</div>
                <div class="mg-t-10"><b>关闭时间:</b><b class="fc-orange mg-r-5">4月30号 17:15开始</b><b>恢复正常:</b><b
                        class="fc-orange mg-r-5">5月6号0点</b>其余时间与常规状态一致</div>
                <div class="title-card mg-t-12 mg-b-5">
                    关于发薪-公对公充值
                </div>
                <div class="p1">请提前充值做好工资备款，避免中途账户余额不足。“公对公充值”关闭时间段，法人可以在小程序中使用管理员</div>
                <div class="p1">个人充值。<b>请合理安排发薪专户的转账充值，以免影响假期使用</b></div>
                <div class="title-card mg-t-12 mg-b-5">
                    关于保险
                </div>
                <div class="flex ">
                    <div class="order">
                        <span class="order-item">1</span>
                    </div>
                    <div class="fc-black">系统正常操作加减保，日日保投保时间不受影响</div>
                </div>
                <div class="flex  mg-t-12">
                    <div class="order">
                        <span class="order-item">2</span>
                    </div>
                    <div class="fc-black">
                        <div>为避免影响您的加减保操作，建议您假期前可以多充值部分保费(用不完可以退回)，保证账户余额充足。放假期间</div>
                        <div>服务群将暂停发送余额不足和断保通知。假期充值，微信可以正常充值，对公充值，财务收到款会正常录入</div>
                    </div>
                </div>
                <div class="flex  mg-t-12">
                    <div class="order">
                        <span class="order-item">3</span>
                    </div>
                    <div class="fc-black"> 系统余额不足会自动断保，断保后完成充值 需要手动操作人员续保，续保成功后会有一天脱保空档期，请知悉。</div>
                </div>
                <div class="flex  mg-t-12">
                    <div class="order">
                        <span class="order-item">4</span>
                    </div>
                    <div class="fc-black">
                        <div>在线报案功能不受影响，系统都可操作(24小时之内系统操作在线报案)。上班之后理赔老师会第一时间受理。</div>
                        <div>当日案(投保24小时内发生的)和涉及有疑义或骨折案件，请及时保存监控视频，以免影响理赔。</div>
                    </div>
                </div>
                <div class="fc-orange mg-t-15">注意:如有其他问题咨询，请联系您的业务经理或服务群内沟通，都会第一时间给您处理。</div>
                <strong class="fc-orange mg-t-8">紧急联系人：丁杰西 183-6103-0666 </strong>
            </div>
            <div class="hint">五一假期将至 祝各位老板"无一"点烦恼，多一点逍遥!“无一”点霉运，好运将您环绕</div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showDialog: false
        }
    },
    watch: {
        show: {
            handler(newval) {
                this.showDialog = newval
            },
            immediate: true
        },
        showDialog(newval) {
            this.$emit('update:show', newval)
        }
    },
    methods: {
        handleClose() {
            localStorage.setItem('laborFestivalClose', true)
            this.showDialog = false
        }
    }
}
</script>
<style lang="stylus" scoped>
.festival-container
    position fixed
    left 0
    top 0
    width 100vw
    height 100vh
    overflow auto
    background rgba(0, 0, 0, 0.7)
    z-index 100
.festival-box
    width 834px
    height 582px
    position absolute
    left 50%
    top 53%
    transform translate(-50%, -50%)
.festival-bg
    width 834px
    height 582px
    background url('../../assets/festival/bg.png') no-repeat
    background-size 100% 100%
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    z-index 100
.festivel-content
    position relative
    z-index 100
    margin-top 100px
    margin-left 60px
    color #3D3D3D
    font-size 14px
.hint
    color #fff
    text-align center
    position absolute
    bottom 16px
    width 100%
    left 50%
    transform translateX(-50%)
    z-index 100
.icon-close
    position absolute
    right 0
    top -50px
    width 36px
    height 36px
    z-index 100
.title-card
    height 32px
    line-height 32px
    padding 0 30px 0 15px
    background linear-gradient(90deg, #FEA217 2%, rgba(254, 162, 23, 0) 99%)
    border-radius 4px
    display inline-block
    font-weight bold
.fc-gray
    color #3D3D3D
.fc-black
    color #000
.fc-orange
    color #FEA217
.icon
    width 14px
    height 14px
    margin-top 3px
    margin-right 6px
.mg-b-8
    margin-bottom 8px
.order
    width 20px
    height 20px
    line-height 20px
    border-radius 10px
    background rgba(254, 162, 23, 0.3)
    color #FEA217
    font-weight bold
    font-style italic
    margin-right 7px
    flex-shrink 0
    display flex
    justify-content center
.order-item
    margin-left -2px
</style>
